<template>
  <div class="details-wrap">
    <NavTabs :list="tabs" :changeTab="handleTabs" />

    <div class="time-wrap">
      <!-- <div class="left-wrap">
                <uni-datetime-picker
                    v-model="datetimerange"
                    :clear-icon="false"
                    type="daterange"
                    @maskClick="handleClick"
                />
            </div> -->

      <van-cell title="选择单个日期" :value="date" @click="timerClick" />
      <van-calendar v-model:show="show" @confirm="onConfirm" />

      <div class="icon-wrap">
        <!-- <img class="icon" :src="IconSearch" mode="scaleToFill" /> -->
      </div>
    </div>
    <div class="content-wrap">
      <div class="card-box">
        <div class="card-left">
          <div class="name-card">订单支出</div>
          <div class="order">订单号:<span class="number">12222222</span></div>
          <div class="time-expenditure">收支时间</div>
        </div>
        <div class="jifen-box">
          <!-- + <img class="icon" :src="JifenIcon" mode="scaleToFill" /> -->
          <span class="total-text">200积分</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import NavTabs from '@/components/tabs/index.vue'
import { defineExpose, ref } from 'vue'
// import NavTabs from '@/components/nav-tabs/index.vue'
// import IconSearch from '@/assets/mine/serach.png'
// import JifenIcon from '@/assets/mine/jifen.png'
const show = ref(false)
const date = ref('')
const timerClick = () => {
  console.log('=============')
  show.value = true
}
const onConfirm = (date) => {
  show.value = false
  console.log('date', date)
  //   this.date = this.formatDate(date);
}
const tabs = [
  { id: 0, name: '全部' },
  { id: 1, name: '收入' },
  { id: 2, name: '支出' },
]

const handleTabs = (item) => {
  console.log('item===>', item)
}
// const onConfirm=(date) =>{
//       const [start, end] = date;
//     //   this.show = false;
//     //   this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
//     }
// 暴露函数给子组件
defineExpose({
  handleTabs,
})
// 选择日期
const handleClick = (e) => {
  console.log('e', e)
}
</script>
<style scoped lang="scss">
.details-wrap {
  width: 100%;
  min-height: 100vh;
  background: #eee;

  .left-wrap {
    width: 90%;
  }
  .time-wrap {
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
    height: 38px;
    padding-left: 5px;
    padding-right: 5px;
    box-sizing: border-box;
    .icon-wrap {
      height: 38px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 10px;
      .icon {
        width: 24px;

        height: 24px;
      }
    }
  }
  .content-wrap {
    padding: 10px;
    box-sizing: border-box;
    border-radius: 10px;
    background: #fff;
    margin-top: 10px;
    .card-box {
      display: flex;
      justify-content: space-between;
      .card-left {
        .name-card {
          font-size: 14px;
          color: #333;
        }
        .order {
          margin-top: 5px;
          font-size: 12px;
          .number {
            color: rgba(0, 153, 255, 1);
          }
        }
        .time-expenditure {
          margin-top: 5px;
          font-size: 12px;
        }
      }
      .jifen-box {
        // width: 80px;
        height: 40px;
        display: flex;
        align-items: center;

        align-items: center;
        .icon {
          width: 24px;
          height: 24px;
        }
        .total-text {
          text-align: right;
          font-size: 12px;
        }
      }
    }
  }
}
</style>
